<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" >
       <title>可视化大屏</title>
    <link rel="stylesheet" type="text/css" href="../static/css/style.css">
    <link rel="stylesheet" type="text/css" href="../static/css/donghua.css">
    <link rel="stylesheet" type="text/css" href="../static/css/top.css">
</head>
<body>
    <img src="\static\images\bg.jpg" alt="背景图片" class="background">
    <img src="\static\images\title_border.png" alt="顶部图片" class="top-header">
    <div class="border-bg"><img src="../static/images/border_bg01.png"></div>
    <h1>2021年全国A级旅游景区基本情况</h1>

<!--    <div class="date-component">-->
<!--        <span id="current-date"></span> &lt;!&ndash; 显示日期的 &ndash;&gt;-->
<!--    </div>-->

    <div class="map">
        <div class="map1"><img src="../static/images/jt.png"></div>
        <div class="map2"><img src="../static/images/lbx.png"></div>
<!--        <div class="map2"><img src="../static/images/map.png"></div>-->
	</div>



<!--    <div class="line"></div>-->
<!--    <div class="line2"></div>-->
<!--    <div class="line3"></
div>-->
<!--    <div class="line4"></div>-->
<!--    <div class="carousel-title">全国A级旅游景区门票收入</div>-->
<!--&lt;!&ndash;    <div class="map-title">各省市A级景区分布</div>&ndash;&gt;-->

    <div class="chart-map">
        {{ map_chart | safe }}
        </div>

    <div class="chart-bar">
        <img src="\static\images\box_title.png" alt="顶部图片" class="bar-box">
        <div class="bar-title">全国A级景区收入类型</div>
        {{ bar_chart | safe }}
    </div>

    <div class="chart-line">
        <img src="\static\images\box_title.png" alt="顶部图片" class="line-box">
        <div class="line-title">全国A级旅游景区接待人次 门票收入</div>
        {{ line_chart | safe }}
    </div>

    <div class="chart-pie">
        <img src="\static\images\box_title.png" alt="顶部图片" class="pie-box">
        <div class="pie-title">全国A级旅游景区年龄占比</div>
        {{ pie_chart | safe }}
    </div>

    <div class="border"></div>

    <div class="scroll-container">
        <div class="scroll-content" id="scroll">
            <!-- 数据将通过 JavaScript 动态添加到这里 -->
        </div>
    </div>

    <div class="wrapper">
        <table class="barbox">
            <tr class="clearfix">
                <td class="pulll_left">29190.75亿</td>
                <td class="pulll_left">32.46亿</td>
            </tr>
            <tr class="clearfix">
                <td class="pulll_left">旅游总花费</td>
                <td class="pulll_left">旅游总人次</td>
            </tr>
        </table>
    </div>

    <table class='top'>
        <caption>全国A级旅游景区最热排行榜</caption>
        <tr>
            <th>排名</th>
            <th>A级景区名称</th>
            <th>省份</th>
        </tr>
        <tr>
            <td>1</td>
            <td>故宫博物院</td>
            <td>北京</td>
        </tr>
        <tr>
            <td>2</td>
            <td>颐和园</td>
            <td>北京</td>
        </tr>
        <tr>
            <td>3</td>
            <td>拉萨布达拉宫景区
            </td>
            <td>西藏
            </td>
        </tr>
        <tr>
            <td>4</td>
            <td>丽江市丽江古城景区</td>
            <td>云南</td>
        </tr>
        <tr>
            <td>5</td>
            <td>乐山市峨眉山景区</td>
            <td>四川</td>
        </tr>
        <tr>
            <td>6</td>
            <td>晋中市平遥古城景区</td>
            <td>山西</td>
        </tr>
        <tr>
            <td>7</td>
            <td>苏州园林</td>
            <td>江苏</td>
        </tr>
        <tr>
            <td>8</td>
            <td>大同市云冈石窟</td>
            <td>山西</td>
        </tr>
        <tr>
            <td>9</td>
            <td>黄山市黄山风景区</td>
            <td>安徽</td>
        </tr>
        <tr>
            <td>10</td>
            <td>枣庄市台儿庄古城景区</td>
            <td>山东</td>
        </tr>
    </table>
    <div class="scroll-title">
        <p>全国A级旅游景区营收-利润</p>
        <img src="\static\images\box_title.png" alt="顶部图片" class="scroll-box">
    </div>

    <script src="../static/js/Carousel.js"></script>
    <script src="../static/js/ctrl.js"></script>
    <script src="../static/js/time.js"></script>
</body>
</html>
